<template>
  <div class="subject">
    <div class="form-wrap">
      <el-form
        :model="dataForm"
        class="demo-form-inline"
        label-width="70px"
        :inline="true"
      >
        <el-form-item label="学科编号">
          <el-input v-model="dataForm.rid" />
        </el-form-item>
        <el-form-item label="学科名称">
          <el-input v-model="dataForm.name" />
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model="dataForm.username" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="dataForm.status" placeholder="请选择">
            <el-option label="全部" value="" />
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchEvent">搜索</el-button>
          <el-button @click="emptyEvent">清除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrap">
      <el-button
        type="primary"
        class="add-btn"
        @click="addEvent"
      >+新增学科</el-button>
      <el-table :data="list">
        <el-table-column align="center" label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (dataForm.page - 1) * dataForm.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="学科编号" prop="rid" />
        <el-table-column align="center" label="学科名称" prop="name" />
        <el-table-column align="center" label="学科简称" prop="short_name" />
        <el-table-column align="center" label="创建者" prop="username" />
        <el-table-column align="center" label="创建日期" prop="create_time" />
        <el-table-column align="center" label="状态" prop="status">
          <template v-slot="{ row }">
            <div :class="{ text: row.status == 0 }">
              {{ row.status == 1 ? '启用' : '禁用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="editEvent(row)">编辑</el-button>
              <el-button type="text" @click="stateEvent(row)">
                <div>
                  {{ row.status == 1 ? '禁用' : '启用' }}
                </div>
              </el-button>
              <el-button type="text" @click="delEvent(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        :current-page.sync="dataForm.page"
        :page-sizes="pagination.pageSizes"
        :page-size.sync="dataForm.limit"
        :layout="pagination.layout"
        :total="total"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>
    <!-- 新增弹框 -->
    <add ref="add" @refresh="getDate" />
  </div>
</template>

<script>
// import SeaRch from './components/seaRch'
import Add from './components/add.vue'
export default {
  components: {
    // SeaRch,
    Add
  },
  data() {
    return {
      list: [{}],
      dataForm: {
        name: '', // 否	string	学科名称
        username: '', // 否	string	创建者用户名
        status: '', // 否	string	状态 0(禁用) 1(启用)
        page: 1, // 否	string	页码 默认为1
        limit: 10, // 否	string	页尺寸 默认为10
        rid: '', // 否	string	学科编号
        page: 1, // 否	string	页码 默认为1
        limit: +localStorage.getItem('pageSize') || 10 // 否	string	页尺寸 默认为10
      },
      total: 100,
      ids: {
        id: ''
      },
      state: {
        id: '',
        status: 0
      }
    }
  },
  created() {
    this.getDate()
  },
  methods: {
    // 获取学科列表
    async getDate() {
      const res = await this.$api.subject.subjectList(this.dataForm)
      this.list = res.data.items
      this.total = res.data.pagination.total
    },
    sizeChange(size) {
      localStorage.setItem('pageSize', size)
      this.getDate()
    },
    currentChange() {
      this.getDate()
    },
    // 删除
    delEvent(id) {
      this.ids.id = id
      this.$confirm('您确认删除该项吗？', '提示')
        .then(async() => {
          await this.$api.subject.subjectRemovePost(this.ids)
          this.$message.success('删除成功')
          if (this.dataForm.page > 1 && this.list.length === 1) {
            this.dataForm.page--
          }
          this.getDate()
        })
        .catch(() => {})
    },
    editEvent(row) {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.dataForm = this.deepCopy(row)
    },
    // 状态编辑
    async stateEvent(row) {
      this.state.status = row.status
      this.state.id = row.id
      await this.$api.subject.subjectStatusPost(this.state)
      this.$message.success('设置状态成功')
      this.getDate()
    },
    addEvent() {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
      this.$emit('refresh')
    },
    // 搜索赋值
    // fn(data) {
    //   this.list = data
    // },
    // 搜索
    async searchEvent() {
      this.getDate()
      // const res = await this.$api.subject.subjectList(this.dataForm)
      // this.$emit('resresh2', res.data.items)
    },
    // 清除
    emptyEvent() {
      this.formReset({ exception: ['page', 'limit'] })
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  .el-button.add-btn {
    margin-bottom: 15px;
  }
}

::v-deep .el-table {
  border: 1px solid #ccc;
  border-top: none;
  th {
    border-bottom: 1px solid #b3b3b3;
    border-top: 1px solid #b3b3b3;
    background: #f0f0f0;
  }
}
.text {
  color: red;
}
</style>
